<template>
  <div class="worldwide-container">
    <div class="img1-container">
      <img src="@assets/img/world/book.jpg" class="hidden-xs">
      <img src="@assets/img/world/book-wap.jpg" class="visible-xs-inline">
    </div>
    <div class="form-container">
      <div class="title">Book A CAR</div>
      <div class="text">
        Welcome to the official JAC website. If you intend to purchase JAC products, please fill in the following information, so that our local distributor will contract with you, and you would get more detailed introduction and better service.
      </div>

      <Form ref="formValidate" :model="formValidate" class="find-form" :rules="ruleValidate" label-position="top">
        <FormItem prop="name">
          <div class="select-form-item">
            <Select v-model="formValidate.name" placeholder="Country" >
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </FormItem>
        <FormItem prop="name">
          <div class="select-form-item">
            <Select v-model="formValidate.name" placeholder="Province" >
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </FormItem>
        <FormItem prop="name">
          <div class="select-form-item">
            <Select v-model="formValidate.name" placeholder="City" >
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </FormItem>
        <FormItem prop="name">
          <div class="select-form-item">
            <Select v-model="formValidate.name" placeholder="Preferred model" >
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </FormItem>
        <div class="text text2">
          Let us help you find the JAC you are looking for
        </div>
        <div class="clearfix">
          <div class="mb">
            <div class="item mr">
              <FormItem label="Name" prop="name">
                <div class="select-form-item">
                  <Select v-model="formValidate.name" placeholder="" >
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </div>
              </FormItem>
            </div>
            <div class="item">
              <FormItem label="Emall Address" prop="name">
                <div class="select-form-item">
                  <Select v-model="formValidate.name" placeholder="" >
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </div>
              </FormItem>
            </div>
          </div>
          <div>
            <div class="item mr">
              <FormItem label="Phone Number" prop="name">
                <div class="select-form-item">
                  <Select v-model="formValidate.name" placeholder="" >
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </div>
              </FormItem>
            </div>
            <div class="item">
              <FormItem label="Address" prop="name">
                <div class="select-form-item">
                  <Select v-model="formValidate.name" placeholder="" >
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </div>
              </FormItem>
            </div>
          </div>

        </div>
        <FormItem label="Message" prop="name">
          <Input v-model="formValidate.name" type="textarea" placeholder=""/>
        </FormItem>
        <div class="clearfix">
          <div class="item">
            <FormItem label="Verification code" prop="name">
              <Input v-model="formValidate.name" placeholder=""/>
            </FormItem>
          </div>
          <div class="item"></div>
        </div>
      </Form>
      <div class="btn-submit cursor-pointer text-center">GO</div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "WorldWide",
		data: () => ({
			formValidate: {name: '1'},
			cityList: [
				{
					value: 'New York',
					label: 'New York'
				},
				{
					value: 'London',
					label: 'London'
				},
				{
					value: 'Sydney',
					label: 'Sydney'
				},
				{
					value: 'Ottawa',
					label: 'Ottawa'
				},
				{
					value: 'Paris',
					label: 'Paris'
				},
				{
					value: 'Canberra',
					label: 'Canberra'
				}
			],
			ruleValidate: {
				name: [
					{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
				],
      }
		})
	}
</script>

<style lang="scss" scoped>
  @import "~@assets/scss/func.scss";
</style>